<!-- @format -->

<template>
  <div>
    <div class="title">{{ cinemaInfo.movieName }}</div>
    <div class="titleInfo">
      <div>{{ cinemaInfo.showTime }}</div>
      <div>{{ cinemaInfo.name }}</div>
    </div>
    <div class="centerInfo">
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[0].name }}</span>
        <img style="width: 20px" :src="cinemaInfo.seatTypeList[0].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[1].name }}</span>
        <img style="width: 20px" :src="cinemaInfo.seatTypeList[1].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[2].name }}</span>
        <img style="width: 20px" :src="cinemaInfo.seatTypeList[2].icon" />
      </div>
      <div class="centerInfo2">
        <span>{{ cinemaInfo.seatTypeList[3].name }}</span>
        <img style="width: 20px" :src="cinemaInfo.seatTypeList[3].icon" />
      </div>
    </div>
    <div class="screen">
      <div class="screen-text">屏幕方向</div>
    </div>
    <div class="box">
      <div
        v-for="(seatItem, index) in cinemaInfo.seatList"
        class="seatClass"
        :key="seatItem.id"
        @click="clickzuowei(seatItem)"
        :style="{
          height: height + 'rem',
          width: width + 'rem',
          top: seatItem.gRow * positionDistin + 'rem',
          left: seatItem.gCol * positionDistin + 'rem',
        }"
      >
        <img
          class="seatImgClass"
          :seatId="seatItem.id"
          :seatIndex="index"
          :src="cinemaInfo.seatTypeList[seatItem.type].icon"
        />
      </div>
    </div>
    <div class="btn" @click="ok">确 认 选 座</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //影院 厅信息
        cinemaInfo: {
          errorCode: 0,
          errorMsg: '',
          name: '4号厅',
          movieName: '白蛇传之白蛇缘起',
          showTime: '2019-03-06 周五 16:50',
          cinema_name: '惊奇队长影院',
          //座位信息
          seatList: [
            {
              //座位id
              id: '16879097',
              //座位X轴实际位置，去掉过道
              row: '1',
              //座位Y轴实际位置，去掉过道
              col: '1',
              //座位X轴位置
              gRow: 1,
              //座位Y轴位置
              gCol: 4,
              //类型：区分座位状态，详情看seatTypeList数组，按0,1,2顺序下去代表不同状态，切换图片
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879101',
              row: '1',
              col: '4',
              gRow: 1,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879104',
              row: '1',
              col: '7',
              gRow: 1,
              gCol: 11,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879099',
              row: '1',
              col: '2',
              gRow: 1,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879102',
              row: '1',
              col: '5',
              gRow: 1,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879105',
              row: '1',
              col: '8',
              gRow: 1,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879100',
              row: '1',
              col: '3',
              gRow: 1,
              gCol: 7,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879103',
              row: '1',
              col: '6',
              gRow: 1,
              gCol: 10,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879107',
              row: '1',
              col: '9',
              gRow: 1,
              gCol: 14,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879113',
              row: '2',
              col: '1',
              gRow: 2,
              gCol: 3,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879117',
              row: '2',
              col: '4',
              gRow: 2,
              gCol: 7,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879120',
              row: '2',
              col: '7',
              gRow: 2,
              gCol: 10,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879124',
              row: '2',
              col: '10',
              gRow: 2,
              gCol: 14,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879114',
              row: '2',
              col: '2',
              gRow: 2,
              gCol: 4,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879118',
              row: '2',
              col: '5',
              gRow: 2,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879121',
              row: '2',
              col: '8',
              gRow: 2,
              gCol: 11,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879125',
              row: '2',
              col: '11',
              gRow: 2,
              gCol: 15,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879116',
              row: '2',
              col: '3',
              gRow: 2,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879119',
              row: '2',
              col: '6',
              gRow: 2,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879122',
              row: '2',
              col: '9',
              gRow: 2,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879142',
              row: '3',
              col: '13',
              gRow: 3,
              gCol: 15,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879129',
              row: '3',
              col: '2',
              gRow: 3,
              gCol: 2,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879133',
              row: '3',
              col: '5',
              gRow: 3,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879136',
              row: '3',
              col: '8',
              gRow: 3,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879139',
              row: '3',
              col: '11',
              gRow: 3,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879143',
              row: '3',
              col: '14',
              gRow: 3,
              gCol: 16,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879130',
              row: '3',
              col: '3',
              gRow: 3,
              gCol: 3,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879134',
              row: '3',
              col: '6',
              gRow: 3,
              gCol: 7,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879137',
              row: '3',
              col: '9',
              gRow: 3,
              gCol: 10,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879141',
              row: '3',
              col: '12',
              gRow: 3,
              gCol: 14,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879144',
              row: '3',
              col: '15',
              gRow: 3,
              gCol: 17,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879128',
              row: '3',
              col: '1',
              gRow: 3,
              gCol: 1,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879131',
              row: '3',
              col: '4',
              gRow: 3,
              gCol: 4,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879135',
              row: '3',
              col: '7',
              gRow: 3,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879138',
              row: '3',
              col: '10',
              gRow: 3,
              gCol: 11,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879154',
              row: '4',
              col: '9',
              gRow: 4,
              gCol: 10,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879145',
              row: '4',
              col: '1',
              gRow: 4,
              gCol: 1,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879158',
              row: '4',
              col: '12',
              gRow: 4,
              gCol: 14,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879148',
              row: '4',
              col: '4',
              gRow: 4,
              gCol: 4,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879161',
              row: '4',
              col: '15',
              gRow: 4,
              gCol: 17,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879152',
              row: '4',
              col: '7',
              gRow: 4,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879155',
              row: '4',
              col: '10',
              gRow: 4,
              gCol: 11,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879146',
              row: '4',
              col: '2',
              gRow: 4,
              gCol: 2,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879159',
              row: '4',
              col: '13',
              gRow: 4,
              gCol: 15,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879150',
              row: '4',
              col: '5',
              gRow: 4,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879153',
              row: '4',
              col: '8',
              gRow: 4,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879156',
              row: '4',
              col: '11',
              gRow: 4,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879147',
              row: '4',
              col: '3',
              gRow: 4,
              gCol: 3,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879160',
              row: '4',
              col: '14',
              gRow: 4,
              gCol: 16,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879151',
              row: '4',
              col: '6',
              gRow: 4,
              gCol: 7,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879164',
              row: '5',
              col: '3',
              gRow: 5,
              gCol: 3,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879168',
              row: '5',
              col: '6',
              gRow: 5,
              gCol: 7,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879171',
              row: '5',
              col: '9',
              gRow: 5,
              gCol: 10,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879175',
              row: '5',
              col: '12',
              gRow: 5,
              gCol: 14,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879178',
              row: '5',
              col: '15',
              gRow: 5,
              gCol: 17,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879162',
              row: '5',
              col: '1',
              gRow: 5,
              gCol: 1,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879165',
              row: '5',
              col: '4',
              gRow: 5,
              gCol: 4,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879169',
              row: '5',
              col: '7',
              gRow: 5,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879172',
              row: '5',
              col: '10',
              gRow: 5,
              gCol: 11,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879176',
              row: '5',
              col: '13',
              gRow: 5,
              gCol: 15,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879163',
              row: '5',
              col: '2',
              gRow: 5,
              gCol: 2,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879167',
              row: '5',
              col: '5',
              gRow: 5,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879170',
              row: '5',
              col: '8',
              gRow: 5,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879173',
              row: '5',
              col: '11',
              gRow: 5,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879177',
              row: '5',
              col: '14',
              gRow: 5,
              gCol: 16,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879207',
              row: '6',
              col: '11',
              gRow: 7,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879211',
              row: '6',
              col: '14',
              gRow: 7,
              gCol: 16,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879198',
              row: '6',
              col: '3',
              gRow: 7,
              gCol: 3,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879202',
              row: '6',
              col: '6',
              gRow: 7,
              gCol: 7,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879205',
              row: '6',
              col: '9',
              gRow: 7,
              gCol: 10,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879209',
              row: '6',
              col: '12',
              gRow: 7,
              gCol: 14,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879212',
              row: '6',
              col: '15',
              gRow: 7,
              gCol: 17,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879196',
              row: '6',
              col: '1',
              gRow: 7,
              gCol: 1,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879199',
              row: '6',
              col: '4',
              gRow: 7,
              gCol: 4,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879203',
              row: '6',
              col: '7',
              gRow: 7,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879206',
              row: '6',
              col: '10',
              gRow: 7,
              gCol: 11,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879210',
              row: '6',
              col: '13',
              gRow: 7,
              gCol: 15,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879197',
              row: '6',
              col: '2',
              gRow: 7,
              gCol: 2,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879201',
              row: '6',
              col: '5',
              gRow: 7,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879204',
              row: '6',
              col: '8',
              gRow: 7,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879220',
              row: '7',
              col: '7',
              gRow: 8,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879223',
              row: '7',
              col: '10',
              gRow: 8,
              gCol: 11,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879214',
              row: '7',
              col: '2',
              gRow: 8,
              gCol: 2,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879227',
              row: '7',
              col: '13',
              gRow: 8,
              gCol: 15,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879218',
              row: '7',
              col: '5',
              gRow: 8,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879221',
              row: '7',
              col: '8',
              gRow: 8,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879224',
              row: '7',
              col: '11',
              gRow: 8,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879215',
              row: '7',
              col: '3',
              gRow: 8,
              gCol: 3,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879228',
              row: '7',
              col: '14',
              gRow: 8,
              gCol: 16,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879219',
              row: '7',
              col: '6',
              gRow: 8,
              gCol: 7,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879222',
              row: '7',
              col: '9',
              gRow: 8,
              gCol: 10,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879213',
              row: '7',
              col: '1',
              gRow: 8,
              gCol: 1,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879226',
              row: '7',
              col: '12',
              gRow: 8,
              gCol: 14,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879216',
              row: '7',
              col: '4',
              gRow: 8,
              gCol: 4,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879229',
              row: '7',
              col: '15',
              gRow: 8,
              gCol: 17,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879230',
              row: '8',
              col: '1',
              gRow: 9,
              gCol: 1,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879233',
              row: '8',
              col: '4',
              gRow: 9,
              gCol: 4,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879237',
              row: '8',
              col: '7',
              gRow: 9,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879240',
              row: '8',
              col: '10',
              gRow: 9,
              gCol: 11,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879244',
              row: '8',
              col: '13',
              gRow: 9,
              gCol: 15,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879231',
              row: '8',
              col: '2',
              gRow: 9,
              gCol: 2,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879235',
              row: '8',
              col: '5',
              gRow: 9,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879238',
              row: '8',
              col: '8',
              gRow: 9,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879241',
              row: '8',
              col: '11',
              gRow: 9,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879245',
              row: '8',
              col: '14',
              gRow: 9,
              gCol: 16,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879232',
              row: '8',
              col: '3',
              gRow: 9,
              gCol: 3,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879236',
              row: '8',
              col: '6',
              gRow: 9,
              gCol: 7,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879239',
              row: '8',
              col: '9',
              gRow: 9,
              gCol: 10,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879243',
              row: '8',
              col: '12',
              gRow: 9,
              gCol: 14,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879246',
              row: '8',
              col: '15',
              gRow: 9,
              gCol: 17,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879256',
              row: '9',
              col: '9',
              gRow: 10,
              gCol: 10,
              type: '3',
              flag: '0',
              price: '69',
            },
            {
              id: '16879260',
              row: '9',
              col: '12',
              gRow: 10,
              gCol: 14,
              type: '3',
              flag: '0',
              price: '69',
            },
            {
              id: '16879263',
              row: '9',
              col: '15',
              gRow: 10,
              gCol: 17,
              type: '2',
              flag: '0',
              price: '69',
            },
            {
              id: '16879247',
              row: '9',
              col: '1',
              gRow: 10,
              gCol: 1,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879250',
              row: '9',
              col: '4',
              gRow: 10,
              gCol: 4,
              type: '2',
              flag: '0',
              price: '69',
            },
            {
              id: '16879254',
              row: '9',
              col: '7',
              gRow: 10,
              gCol: 8,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879257',
              row: '9',
              col: '10',
              gRow: 10,
              gCol: 11,
              type: '2',
              flag: '0',
              price: '69',
            },
            {
              id: '16879261',
              row: '9',
              col: '13',
              gRow: 10,
              gCol: 15,
              type: '2',
              flag: '0',
              price: '69',
            },
            {
              id: '16879248',
              row: '9',
              col: '2',
              gRow: 10,
              gCol: 2,
              type: '2',
              flag: '0',
              price: '69',
            },
            {
              id: '16879252',
              row: '9',
              col: '5',
              gRow: 10,
              gCol: 6,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879255',
              row: '9',
              col: '8',
              gRow: 10,
              gCol: 9,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879258',
              row: '9',
              col: '11',
              gRow: 10,
              gCol: 12,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879262',
              row: '9',
              col: '14',
              gRow: 10,
              gCol: 16,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879249',
              row: '9',
              col: '3',
              gRow: 10,
              gCol: 3,
              type: '0',
              flag: '0',
              price: '69',
            },
            {
              id: '16879253',
              row: '9',
              col: '6',
              gRow: 10,
              gCol: 7,
              type: '2',
              flag: '0',
              price: '69',
            },
          ],
          seatTypeList: [
            {
              name: '可选',
              type: '0',
              seats: 1,
              icon: 'https://img.ixintu.com/download/jpg/202001/cd65d4461efea578df188726b4caee7b.jpg!con',
              isShow: '1',
              position: 'up',
            },
            {
              name: '已选',
              type: '0-1',
              seats: 1,
              icon: 'https://bpic.588ku.com/element_water_img/19/06/08/a013af39b8efecf8d06adaa666758847.jpg',
              isShow: '1',
              position: 'up',
            },
            {
              name: '已售',
              type: '0-2',
              seats: 1,
              icon: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.AgP8h8O1Xq_6Y0sTs2rKTgHaHa?rs=1&pid=ImgDetMain',
              isShow: '1',
              position: 'up',
            },
            {
              name: '维修',
              type: '0-3',
              seats: 1,
              icon: 'https://ts1.cn.mm.bing.net/th/id/R-C.b9547be571b4bfcde66f11142f9545dc?rik=EEW3wcZ5c%2btvGw&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2020%2f02-20%2f73810%2fwater_73810_698_698_.png&ehk=XxVhKoVqCVr8y7Ef2B1xF3pDz7E1d0wrDy5p6iWvRzo%3d&risl=&pid=ImgRaw&r=0',
              isShow: '1',
              position: 'up',
            },
            {
              name: '情侣首座可选',
              type: '1',
              seats: 1,
              icon: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.x19kt6uOr96LhCxQ_Jx-QAHaGr?rs=1&pid=ImgDetMain',
              isShow: '0',
              position: 'up',
            },
            {
              name: '情侣首座已选',
              type: '1-1',
              seats: 1,
              icon: 'https://ts1.cn.mm.bing.net/th/id/R-C.af3493d1983ae11892d2da03bcd06ebb?rik=ecobQP3PpeApFg&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f19%2f03%2f28%2faacf1dfbf681a83c89a501c0ceb7c70d.jpg&ehk=7LjTQgYTYMmBVL2VPpkqKNOVvCl9a4GQyYvS32QNux4%3d&risl=&pid=ImgRaw&r=0',
              isShow: '0',
              position: 'up',
            },
            {
              name: '情侣首座已售',
              type: '1-2',
              seats: 1,
              icon: 'https://www.xollipop.top/情侣首座已售.png',
              isShow: '0',
              position: 'up',
            },
            {
              name: '情侣首座维修',
              type: '1-3',
              seats: 1,
              icon: 'https://www.xollipop.top/情侣首座维修.png',
              isShow: '0',
              position: 'up',
            },
            {
              name: '情侣次座可选',
              type: '2',
              seats: 1,
              icon: 'https://www.xollipop.top/情侣次座可选.png',
              isShow: '0',
              position: 'up',
            },
            {
              name: '情侣次座已选',
              type: '2-1',
              seats: 1,
              icon: 'https://www.xollipop.top/情侣次座已选.png',
              isShow: '0',
              position: 'up',
            },
            {
              name: '情侣次座已售',
              type: '2-2',
              seats: 1,
              icon: 'https://www.xollipop.top/情侣次座已售.png',
              isShow: '0',
              position: 'up',
            },
            {
              name: '情侣次座维修',
              type: '2-3',
              seats: 1,
              icon: 'https://www.xollipop.top/情侣次座维修.png',
              isShow: '0',
              position: 'up',
            },
            {
              name: '情侣座',
              type: '5',
              seats: 2,
              icon: 'https://www.xollipop.top/情侣座.png',
              isShow: '1',
              position: 'up',
            },
          ],
        },
        width: 1.4, // 每个座位的宽
        height: 1.4, // 每个座位的高
        positionDistin: 1.1, // 每个座位偏移距离
      }
    },
    methods: {
      //点击座位的时候切换图片。
      clickzuowei(val) {
        console.log(val, '座位信息')
        //循环影厅内座位信息
        this.cinemaInfo.seatList.forEach((item) => {
          //判断：选中座位和数组内的id是否一致
          if (item.id == val.id) {
            //一致就判断他的状态是不是0,0代表未选中，如果是未选中，那就改为1,1就是选中状态。
            if (item.type == 0) {
              item.type = 1
              //如果状态是1，也就是已经选中的状态，点击就会变成未选中
            } else if (item.type == 1) {
              item.type = 0
              //如果状态2，也就是已经出售的座位，就提示从新选座
            } else if (item.type == 2) {
              alert('此座位已出售，请从新选座')
              //如果状态3，代表座位损坏，也是提示维修中。
            } else if (item.type == 3) {
              alert('此座位损坏，正在维修中！')
            }
          }
        })
      },
      //确认选座
      ok() {
        //筛选出选择的座位
        let info = this.cinemaInfo.seatList.filter((item) => {
          return item.type == 1
        })
        let list = []
        //筛选出选择的座位排和列
        info.forEach((item) => {
          list.push(item.row + ' 排 ' + item.col + ' 座 ')
        })
        console.log('选中的座位信息:', info)
        //有选中的时候显示选中信息和确认购买。没有选中的时候提醒先选座
        if (info.length == 0) {
          alert('请先选择座位，再确认购买！')
        } else {
          alert('当前选中座位:' + list.toString())
        }
      },
    },
  }
</script>

<style scoepd>
  .seatClass {
    position: absolute;
  }
  .box {
    position: relative;
    margin-top: -40px;
  }
  .seatImgClass {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  .title {
    width: 100%;
    height: 35px;
    background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
    text-align: center;
    line-height: 35px;
    color: #fff;
    letter-spacing: 2px;
  }
  .titleInfo {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #ccc;
    margin-top: 10px;
    padding: 0 10px 0 10px;
  }
  .centerInfo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
  }
  .centerInfo2 {
    display: flex;
    align-items: center;
  }
  .screen {
    width: 250px;
    border: 30px solid #ccc;
    border-color: #ccc transparent transparent transparent;
    height: 20px;
    margin: auto;
    margin-top: 10px;
  }
  .screen-text {
    text-align: center;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-top: -30px;
  }
  .btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
    text-align: center;
    line-height: 35px;
    color: #fff;
  }
</style>
